<template>
  <div>
    <h3>富文本组件</h3>
    <!--  vue-quill-editor 
      1：安装
          npm install vue-quill-editor --save
      2：局部导入注册使用
         import 'quill/dist/quill.core.css'
        import 'quill/dist/quill.snow.css'
        import 'quill/dist/quill.bubble.css'
        
        import { quillEditor } from 'vue-quill-editor'

      3:注册
        components:{
            quillEditor
        }
      4:当标签使用
          quillEditor     
      5:
        v-model=值的双向绑定
        @change="值改变时执行的方法"    -->
    <div>{{ txt }}</div>
    <div style="width:600px">
      <quillEditor v-model="txt" @change="changeEvent"></quillEditor>
    </div>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  data () {
    return {
      txt: ''
    }
  },
  components: {
    quillEditor
  },
  methods: {
    changeEvent () {
      console.log('值改变了')
    }
  }
}
</script>
<style></style>
